<template>
	<view class="spring-image-text">
		<view v-for="(item, index) in dataList" :key="index" class="item"
			:style="{borderRadius: radius, backgroundColor: bgColor, color: color}" @tap="onTapItem(item)">
			<view class="left-box" :class="imageShape == 'square'?'left-box-square':''"
				:style="{borderRadius: radius, order: imagePosition == 'left'? 1 : 2}">
				<image class="image" :class="imageShape == 'square'?'image-square':''" :src="item.coverImage"
					mode="aspectFill">
				</image>
			</view>
			<view class="right-box" :class="imagePosition=='left'?'order-2':'order-1'"
				:style="{order: imagePosition == 'left'? 2 : 1}">
				<view class="title-desc">
					<view class="title" :style="{fontWeight: titleFontWeight}">
						<text class="text">{{item.title}}</text>
					</view>
					<view v-if="showDesc" class="desc">
						<text class="text" :style="{color: descColor?descColor:color}">mac: {{item.desc}}</text>
					</view>
					<!-- <view v-if="showTimeIcon" class="desc">
						<text class="text" :style="{color: timeColor?timeColor:color}">{{item.createTime}}</text>
					</view> -->
				</view>
				<view class="time" :style="{color: timeColor?timeColor:color}">
					<uni-icons v-if="showTimeIcon" custom-prefix="iconfont" type="icon-shijian" color=""></uni-icons>
					<text class="text" :style="{color: timeColor?timeColor:color}">{{item.batteryLevel}}%</text>
					<!-- 电量百分比 -->
					<view class="battery">
						<view class="power" v-if="item.batteryLevel >= 20" :style="{width:item.batteryLevel / 1.4+'rpx',backgroundColor:colors}"></view>
						<view class="power" v-if="item.batteryLevel < 20" :style="{width:item.batteryLevel / 1.4+'rpx',backgroundColor:colorsRED}"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'spring-image-text',
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			showDesc: {
				type: Boolean,
				default: true
			},
			showTimeIcon: {
				type: Boolean,
				default: true
			},
			radius: {
				type: String,
				default: '16rpx'
			},
			imageRadius: {
				type: String,
				default: '16rpx'
			},
			titleFontWeight: {
				type: Number,
				default: 700
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			color: {
				type: String,
				default: '#354E6B'
			},
			descColor: {
				type: String,
				default: ''
			},
			timeColor: {
				type: String,
				default: ''
			},
			imagePosition: {
				type: String,
				default: 'left'
			},
			imageShape: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				colors: '#00B561',
				colorsRED: '#FF5800',
			}
		},
		onLoad() {

		},
		methods: {
			onTapItem(item) {
				this.$emit('tapItem', item)
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url('iconfont.css');

	.item {
		padding: 25rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;

		&:nth-last-child(1) {
			margin-bottom: 0 !important;
		}

		.left-box {
			height: 150rpx;
			overflow: hidden;

			.image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.left-box-square {
			height: 200rpx !important;

			.image-square {
				width: 200rpx !important;
				height: 200rpx !important;
			}
		}

		.right-box {
			padding: 6rpx 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;

			.title-desc {
				.title {
					.text {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.desc {
					margin-top: 10rpx;

					.text {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}

			.time {
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.uni-icons {
					margin-right: 8rpx;
				}
			}
		}

		.order-1 {
			margin-right: 25rpx;
		}

		.order-2 {
			margin-left: 25rpx;
		}
	}

	.outer {
		display: table;
		height: 100%;
		width: 100%;
	}

	.inner {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

	.battery {
		position: relative;
		display: inline-block;
		height: 20rpx;
		width: 44rpx;
		margin: 10px;

		background: #B4B4B4;
		border: 1rpx solid transparent;
		border-radius: 1rpx;
	}

	.battery:before {
		content: "";
		position: absolute;
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 5rpx;

	}

	.battery:after {
		content: "";
		position: absolute;
		top: calc(50% - 8rpx);
		right: -10rpx;
		height: 16rpx;
		width: 8rpx;
		border-radius: 0 4rpx 4rpx 0;
		background-color: #B4B4B4;
	}

	.power {
		background-color: white;
		display: block;
		position: absolute;
		top: 3rpx;
		left: 3rpx;
		bottom: 3rpx;
		right: 3rpx;
		border-radius: 5rpx;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
		transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95);
		transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95), -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
	}
</style>